<template>
  <div>
    <ul class="knapsack-gift">
      <li v-for="item in bagsDataJSON" :key="item.id">
        <span class="gift-number">{{ item.itemnum }}</span>
        <img src="../assets/logo.png" alt="" />
        <h3>{{ item.itemname }}</h3>
        <h4 v-if="item.itemprice == null">免费开启</h4>
        <h4 v-if="item.itemprice !== undefined">{{ item.itemprice }}快币</h4>
        <span class="gift-time">{{ item.itemtime }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import bagsData from "../static/data.json";
export default {
  name: "Knapsack",

  data() {
    return {
      bagsDataJSON: [],
    };
  },
  created() {
    this.bagsDataJSON = bagsData.bags;
  },
};
</script>

<style scoped>
.gift-number {
  position: absolute;
  display: block;
  right: 0;
  width: 30px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 5px;
  background-color: #e64867;
  color: #fff;
  font-size: 12px;
}
img {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 60px;
  height: 60px;
}
img:hover {
  transform: scale(1.2) translate(-50%, 0);
}
h3 {
  position: absolute;
  color: #fff;
  top: 45%;
  left: 50%;
  transform: translate(-50%, 0);
}
h4 {
  position: absolute;
  color: #f0f0f0;
  top: 61%;
  left: 50%;
  transform: translate(-50%, 0);
}
.gift-time {
  position: absolute;
  display: block;
  top: 75%;
  left: 50%;
  transform: translate(-50%, 0);
  color: #f0f0f0;
  font-size: 12px;
}
</style>